<script setup lang='ts'>
import {onMounted, reactive} from 'vue';
import {propApi} from '@/api/controller';
import {Toastloading, ToastWarning} from '@/utils/public';
import {getPlayEndTime, getDateArray} from '@/utils'
import Pagination from "@/components/Pagination/index.vue";
import xmDatePicker from '@/components/xmDatePicker/index.vue';
import table2excel from 'js-table2excel';

const listQuery = reactive({
  room_id: '',
  room_number: '',
  room_name: '',
  page:'',
  limit: '',
  timeObj:{},
  cate_id: '',
})

const roomForm = reactive({
  cate_id: '1'
})

const action = reactive({
  list: [],
  timeObj: [],
  total: 0,
  loading: false,
  pageSize: 10,
  currentPage: 1
})
const getList = async () => {
  action.loading = true
  try {
    const params = {
      page: action.currentPage,
      page_size: action.pageSize,
      room_id: listQuery.room_id,
      room_number: listQuery.room_number,
      room_name: listQuery.room_name,
      cate_id: roomForm.cate_id,
      start_time: action.timeObj[0],
      end_time: action.timeObj[1]
    }
    const res = await propApi.getRoomPreviewList(params)
    action.list = res.data.list
    action.total = res.data.total
  } catch (error) {
    ToastWarning('获取列表失败')
  }
  action.loading = false
}

const exportData = async () => {
  const loading = Toastloading('导出中...')
  try {
    const params = {
      room_id: listQuery.room_id,
      room_number: listQuery.room_number, 
      room_name: listQuery.room_name,
      cate_id: roomForm.cate_id,
      start_time: action.timeObj[0],
      end_time: action.timeObj[1]
    }
    const res = await propApi.exportRoomPreview(params)
    table2excel.export_json_to_excel({
      header: ['房间uid', '房间号', '所属类别', '日期', '投入额', '产出额', '产出比%'],
      data: res.data,
      filename: '房间预览'
    })
  } catch (error) {
    ToastWarning('导出失败')
  }
  loading.close()
}

const roomDetail = () => {
  window.open('/prop/easteregg/roomDetail')
}

onMounted(() => {
  getList()
})

</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">房间id：</div>
          <el-input v-model="listQuery.room_id" placeholder="请输入" />
        </div>
        <div class="labelItem">
          <div class="label">房间号：</div>
          <el-input v-model="listQuery.room_number" placeholder="请输入" />
        </div>
        <div class="labelItem">
          <div class="label">房间名：</div>
          <el-input v-model="listQuery.room_name" placeholder="请输入" />
        </div>
        <div class="labelItem">
          <div class="label">筛选：</div>
          <el-select v-model="listQuery.cate_id" placeholder="请选择游戏">
            <el-option label="公池" value="1" />
            <el-option label="房间个池" value="2" />
          </el-select>
        </div>
        <div class="labelItem">
          <xmDatePicker v-model:timeval="listQuery.timeObj" />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="getList">查询</el-button>
        </div>
      </div>
    </div>

    <el-table :data="action.list" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="room_id" label="房间uid" />
      <el-table-column prop="room_number" label="房间名" />
      <el-table-column prop="room_name" label="所属类型" />
      <el-table-column prop="created_at" label="日期" />
      <el-table-column prop="invest_amount" label="投入额" />
      <el-table-column prop="output_amount" label="产出额" />
      <el-table-column prop="output_rate" label="产出比%" />
    </el-table>

    <div class="pagination">
      <el-pagination v-show="action.total > 0" v-model:current-page="listQuery.page"
        v-model:page-size="listQuery.limit" :page-sizes="[10, 20, 50, 100]" :total="action.total"
        layout="total, sizes, prev, pager, next" @size-change="getList" @current-change="getList" />
    </div>

  </div>
</template>
